<template>
  <div>
    <el-dialog
      :visible.sync="visible"
      :title="!dataForm.id ? $t('add') : $t('update')"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="70%"
    >
      <el-form
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        @keyup.enter.native="dataFormSubmitHandle()"
        :label-width="$i18n.locale === 'en-US' ? '170px' : '140px'"
      >
        <h5>客户信息</h5>
        <el-row :gutter="30">
          <el-col :span="7">
            <el-form-item
              label="客户来源"
              prop="guestSourceId"
              style="width: 100%"
            >
              <el-select v-model="dataForm.guestSourceId" placeholder="请选择" clearable>
                <el-option
                  v-for="item in laiyuan"
                  :key="item.id"
                  :label="item.guestSource"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="客户姓名" prop="guestName">
              <el-input
                v-model="dataForm.guestName"
                placeholder="客户姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="手机号" prop="guestPhone">
              <el-input
                v-model="dataForm.guestPhone"
                placeholder="手机号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <i class="el-icon-postcard" @click="dialogFormVisible3 = true"></i>
          </el-col>
        </el-row>
        <h5>房间信息</h5>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="到达时间" prop="arriveDate">
              <el-date-picker
                v-model="dataForm.arriveDate"
                type="datetime"
                placeholder="到达时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="离开时间" prop="leaveDate">
              <el-date-picker
                v-model="dataForm.leaveDate"
                type="datetime"
                placeholder="离开时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入住类型" prop="checkInType">
              <el-radio-group v-model="dataForm.detailFormList[0].checkInType">
                <el-radio :label="1">正常入住</el-radio>
                <el-radio :label="2">自用房</el-radio>
                <el-radio :label="2">免费入住</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="共几晚" prop="num">
              <el-input
                v-model="dataForm.num"
                placeholder="共几晚"
                type="number"
                min="1"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="房型名称" prop="houseBaseId">
              <el-select v-model="dataForm.houseBaseId" clearable placeholder="请选择" style="width:100%">
                <el-option
                  v-for="item in houseBases"
                  :key="item.houseBaseId"
                  :label="item.name"
                  :value="item.houseBaseId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="房号" prop="roomNumber">
              <el-input v-model="dataForm.detailFormList[0].roomNumber"></el-input>
            </el-form-item>
          </el-col>
           <el-col :span="12">
            <el-form-item label="房价" prop="roomAmount">
              <el-input v-model="dataForm.detailFormList[0].roomAmount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="其他消费/支出" prop="otherAmount">
              <el-input
                v-model="dataForm.detailFormList[0].otherAmount"
                style="width: 160px; margin-right: 15px"
              ></el-input>
              <el-button type="success" @click="dialogFormVisible = true">
                添加其他支出
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="早餐金额" prop="breakfastAmount">
              <el-input
                v-model="dataForm.detailFormList[0].breakfastAmount"
                style="width: 160px; margin-right: 15px"
              ></el-input>
              <el-button type="success" @click="dialogFormVisible2 = true">
                添加早餐
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注信息" prop="remarks">
              <el-input
                type="textarea"
                rows="4"
                v-model="dataForm.remarks"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template slot="footer">
        <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
        <el-button type="primary" @click="dataFormSubmitHandle()">{{
          $t("confirm")
        }}</el-button>
      </template>
    </el-dialog>
    <el-dialog
      title="添加其他消费"
      :visible.sync="dialogFormVisible"
      class="diaBox"
    >
      <div class="item" v-for="(item, index) in otherList" :key="index">
        <span class="p1">{{ item.projectName }}</span>
        <span class="p2">{{ item.categoryName }}</span>
        <span>{{ item.defaultPrice }}</span>
        <el-input-number v-model="item.num" :min="1" label=""></el-input-number>
      </div>
      <p class="total">
        <span class="totalMOney">￥{{ dataForm.detailFormList[0].otherAmount }}</span>
        <span>共{{ total }}件商品</span>
      </p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 添加早餐 -->
    <el-dialog title="早餐" :visible.sync="dialogFormVisible2" class="diaBox">
      <div class="item" v-for="(item, index) in breakfastList" :key="index">
        <span class="p2">{{ item.breakfastName }}</span>
        <span>{{ item.price }}</span>
        <el-input-number v-model="item.num" :min="1" label=""></el-input-number>
      </div>
      <p class="total">
        <span class="totalMOney">￥{{ this.dataForm.detailFormList[0].breakfastAmount }}</span>
        <span>共{{ total2 }}件商品</span>
      </p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible2 = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 添加入住人 -->
    <el-dialog title="添加入住人" :visible.sync="dialogFormVisible3">
      <el-form :model="dataForm" label-width="0">
        <el-row
          :gutter="20"
          v-for="(item, index) in dataForm.detailFormList[0].checkInPersonList"
          :key="index"
        >
          <el-col :span="6">
            <el-form-item
              :prop="'checkInPersonList.' + index + '.checkInName'"
              :rules="{
                required: true,
                message: $t('validate.required'),
                trigger: 'blur',
              }"
            >
              <el-input
                v-model="item.checkInName"
                autocomplete="off"
                placeholder="入住人姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              :prop="'checkInPersonList.' + index + '.idCard'"
              :rules="{
                required: true,
                message: $t('validate.required'),
                trigger: 'blur',
              }"
            >
              <el-input
                v-model="item.idCard"
                autocomplete="off"
                placeholder="入住人证件号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :prop="'checkInPersonList.' + index + '.nation'">
              <el-input
                v-model="item.nation"
                autocomplete="off"
                placeholder="民族"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item :prop="'checkInPersonList.' + index + '.address'">
              <el-input
                v-model="item.address"
                autocomplete="off"
                placeholder="地址"
              ></el-input>
            </el-form-item>
          </el-col>
          <i
            class="el-icon-delete"
            @click="delPer(index)"
            style="font-size: 25px; margin-top: 5px"
          ></i>
        </el-row>
        <el-button type="success" @click="addPer()"> 新增 </el-button>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible3 = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import debounce from "lodash/debounce";
import template from "../devtools/template.vue";
export default {
  components: { template },
  data() {
    return {
      visible: false,
      laiyuan: [],
      houseBases: [],
      otherList: [],
      breakfastList: [],
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      total: 0, //其他支出几件
      total2: 0, //早餐份数
      dataForm: {
        arriveDate: "",
        detailFormList: [
          {
            breakfastAmount: 0,
            checkInPersonList: [
              {
                address: "",
                checkInName: "",
                id: 0,
                idCard: "",
                nation: "",
                orderDetailId: 0,
              },
            ],
            checkInType: 0,
            id: 0,
            otherAmount: 0,
            roomAmount: 0,
            roomIds: "",
            roomNumber: "",
          },
        ],
        guestName: "",
        guestPhone: "",
        guestSourceId: 0,
        homestayId:this.$store.state.user.homestayId,
        houseBaseId:0,
        leaveDate: "",
        num: 0,
        orderStatus:null,
        remarks: "",
      },
    };
  },
  props: ["roomsId", "type"],
  computed: {
    dataRule() {
      return {
        guestName: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        guestPhone: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  created() {},
  watch: {
    otherList: {
      handler(newval, oldval) {
        let totalMoney = 0;
        let total = 0;
        for (let i = 0; i < newval.length; i++) {
          total += newval[i].num;
          totalMoney += newval[i].num * parseFloat(newval[i].defaultPrice);
        }
        this.total = total;
        this.dataForm.detailFormList[0].otherAmount = totalMoney;
      },
      deep: true,
    },
    breakfastList: {
      handler(newval, oldval) {
        let totalMoney = 0;
        let total = 0;
        for (let i = 0; i < newval.length; i++) {
          total += newval[i].num;
          totalMoney += newval[i].num * parseFloat(newval[i].price);
        }
        this.total2 = total;
        this.dataForm.detailFormList[0].breakfastAmount = totalMoney;
      },
      deep: true,
    },
  },
  methods: {
    addPer() {
     this.dataForm.detailFormList[0].checkInPersonList.push({
        address: "",
        checkInName: "",
        idCard: "",
        nation: "",
      });
    },
    delPer(index) {
      this.dataForm.detailFormList[0].checkInPersonList.splice(index, 1);
    },
    getLaiyuan() {
      this.$http
        .get("/hotel/guest/page", {
          params: {
            homestayId: this.$store.state.user.homestayId,
            limit: 100,
            page: 1,
          },
        })
        .then((res) => {
          this.laiyuan = res.data.data.list;
        });
    },
    // 房型列表
    gethouseBases() {
      this.$http
        .get(
          `/hotel/house/base/getHouseSearchBox/${this.$store.state.user.homestayId}`
        )
        .then((res) => {
          this.houseBases = res.data.data;
        });
    },
    // 其他分类列表
    getOther() {
      this.$http
        .get("/hotel/other/expense/project/page", {
          params: {
            homestayId: this.$store.state.user.homestayId,
            limit: 100,
            page: 1,
          },
        })
        .then((res) => {
          for (let i = 0; i < res.data.data.list.length; i++) {
            res.data.data.list[i].num = 0;
          }
          this.otherList = res.data.data.list;
        });
    },
    // 早餐
    getBreakfast() {
      this.$http
        .get("/hotel/house/breakfast/page", {
          params: {
            homestayId: this.$store.state.user.homestayId,
            limit: 100,
            page: 1,
          },
        })
        .then((res) => {
          for (let i = 0; i < res.data.data.list.length; i++) {
            res.data.data.list[i].num = 0;
          }
          this.breakfastList = res.data.data.list;
        });
    },
    init() {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
        this.getBreakfast();
        this.gethouseBases();
        this.getOther();
        this.getLaiyuan();
        this.getInfo();
        }
      });
    },
    // 获取信息
    getInfo() {
      this.$http
        .get(`/hotel/order/${this.dataForm.id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
            this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
        })
        .catch(() => {});
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function () {
        this.$refs["dataForm"].validate((valid) => {
          if (!valid) {
            return false;
          }
          this.dataForm.orderStatus = this.type;
          this.$http[!this.dataForm.id ? "post" : "put"](
            "/hotel/order/placeOrder",
            this.dataForm
          )
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            })
            .catch(() => {});
        });
      },
      1000,
      { leading: true, trailing: false }
    ),
  },
};
</script>
<style scoped lang="scss">
.diaBox {
  .item {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: center;
    font-size: 14px;
    margin-bottom: 10px;
    .p1 {
      font-size: 20px;
      font-weight: 600;
      min-width: 120px;
      width: 120px;
    }
    .p2 {
      width: 120px;
      flex: 1;
    }
  }
}
.total {
  border-top: 1px solid #eee;
  margin-top: 30px;
  span {
    font-size: 14px;
    &:first-child {
      color: #f44;
      font-weight: 600;
      font-size: 20px;
      margin-right: 10px;
    }
  }
}
h5 {
  margin: 0 auto 20px;
  border-bottom: 1px solid #eee;
  padding: 10px 0 10px 10px;
  font-size: 16px;
  background-color: #f5f5f5;
}
.el-icon-postcard {
  font-size: 20px;
}
</style>
